<!doctype html>

<html style="height:100%">
<head>
    <title>日记助手</title>

    <link rel="stylesheet" href="{{ url_for('static', filename='jquery-ui.css') }}" />
    <script src="{{ url_for('static', filename='jquery-3.3.1.js') }}"></script>
    <script src="{{ url_for('static', filename='jquery-ui.js') }}"></script>

    <style type="text/css">
    body,input,textarea {font-family:Microsoft YaHei; font-size:100%; border-radius:5px;}
    textarea {width:98%; height:100%; resize:none;}
    table {table-layout:fixed; }
    </style>
</head>

<body style="margin:0; width:100%">

    <!-- 标题 -->
    <div align=center style="width:100%; height:50px; background:#003399; ">
        <table border=0 style="width:80%; height:100%; ">
            <tr align=left>
                <th width=30%>
                    <a href="" style="text-decoration:none; color:white; font-size:150%; ">日记助手 </a>
                </th>
            </tr>
        </table>
    </div>

    <!-- 正文 -->
    <div align=center style="width:100%; ">
        <table border=0 style="width:80%; text-align:center;">
            <tr style="height:50px; text-align:left;">
                <th>
                    日期：<input type=text id=date>
                    天气：<input type=text id=weather>
                    地点：<input type=text id=location>
                    人物：<input type=text id=person><br>
                    行程：<input type=text id=route size=100 value="早饭——上班——午饭——上班——晚饭——上班——回家——"><br>
                </th>
            </tr>

            <tr style="background-color:#CC0033; color: white">
                <td>
                    原始文本
                    <textarea id=content rows=20></textarea>
                    <input type=submit value=生成 onclick="doProcess()"/>
                </td>
            </tr>

            <tr style="margin-top:50; ">
                <td>
                    提取结果
                    <textarea id=ret_str rows=20 style="background-color:#EBEBE4"></textarea>
                    <input type=submit value=拷贝 onclick="doCopy()"/>
                </td>
            </tr>
        </table>
    </div>
    
    <script type="text/javascript">
    <!-- 提示框 -->
    $( document ).tooltip();

    <!-- 按钮 -->
    $( "input[type=submit], button" )
    .button()
    <!-- .click(function( event ) { -->
    <!-- event.preventDefault(); -->
    <!-- }); -->

    <!-- 校验为空 -->
    function check_null(value, alerttxt)
    {
        if (value != "")
        {
            return true;
        }
        else
        {
            alert(alerttxt);
            return false;
        }
    }

    function doProcess()
    {
        $.post('/do_process', {
            date: $('#date').val(),
            
            weather: $('#weather').val(),
            location: $('#location').val(),
            person: $('#person').val(),
            
            route: $('#route').val(),
            
            content: $('#content').val(),
        },
        function (data, status) {
            if (status == 'success')
            {
                <!-- {'ret_str': ret_str} -->
                ret_json = $.parseJSON(data);

                $('#ret_str').val(ret_json.ret_str)
            }
            else
            {
                $('#ret_str').val(status)
            }
        })
    }
    
    <!-- 提交正则 -->
    <!-- function submitRegGet(){ -->
        <!-- var input_reg = $('#reg') -->
        <!-- var val_reg = input_reg.val() -->
        <!-- if (!check_null(val_reg, "reg null!")) -->
        <!-- { -->
            <!-- input_reg.focus(); -->
            <!-- return; -->
        <!-- } -->

        <!-- var input_content = $('#content') -->
        <!-- var val_content = input_content.val() -->
        <!-- if (!check_null(val_content, "content null!")) -->
        <!-- { -->
            <!-- input_content.focus(); -->
            <!-- return; -->
        <!-- } -->

        <!-- var input_ret_str = $('#ret_str') -->

        <!-- $.post('/reg_get', { -->
            <!-- reg: val_reg, -->
            <!-- content: val_content -->
        <!-- }, -->
        <!-- function (data, status) { -->
            <!-- if (status == 'success') -->
            <!-- { -->
                <!-- <!-- {'ret_count': ret_count,  --> -->
                <!-- <!-- 'ret_str': ret_str} --> -->
                <!-- ret_json = $.parseJSON(data); -->

                <!-- $('#ret_count').html('提取结果(' + ret_json.ret_count + ')') -->
                <!-- $('#ret_str').val(ret_json.ret_str) -->
            <!-- } -->
            <!-- else -->
            <!-- { -->
                <!-- $('#ret_count').html('提取结果(' + status + ')') -->
            <!-- } -->

        <!-- }) -->
    <!-- } -->

    <!-- 拷贝 -->
    function doCopy()
    {
        var widget = $("#ret_str")
        widget.focus();
        widget.select();
        document.execCommand("Copy");
        alert("已复制至剪切板");
    }
    </script>
</body>
</html>